<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="translate(title)"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
      <!-- <el-form-item label="公司主键：" prop="fullName">
        <el-tree-select
          v-model="form.companyId"
          :check-strictly="true"
          :data="tree"
          node-key="id"
          :props="defaultProps"
          :render-after-expand="false"
          show-checkbox
        />
      </el-form-item> -->
      <el-form-item :label="translate('物资类别父级') + '：'" prop="parentId">
        <el-tree-select
          v-model="form.parentId"
          :check-strictly="true"
          :data="parentList"
          :default-checked-keys="[form.parentId]"
          node-key="id"
          :props="defaultProps"
          :render-after-expand="false"
          show-checkbox
        />
      </el-form-item>
      <el-form-item :label="translate('物资类别编码') + '：'" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item :label="translate('物资类别名称') + '：'" prop="fullName">
        <el-input v-model="form.fullName" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">{{ translate('取消') }}</el-button>
      <el-button type="primary" @click="save">
        {{ translate('确定') }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { doEdit, gets } from '@/api/category'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'CategoryEdit',
    props: {
      tree: {
        type: Array,
        default: () => [],
      },
      parentList: {
        type: Array,
        default: () => [],
      },
      parentId: {
        type: String,
        default: '',
      },
    },
    emits: ['fetchData'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        defaultProps: {
          children: 'ChildNodes',
          label: 'text',
        },
        queryForm: {
          CompanyId: 'string',
          departmentId: 'string',
          nature: 'string',
        },
        form: {},
        rules: {
          parentId: [
            {
              required: false,
              trigger: 'blur',
              message: translate('请输入物资类别父级'),
            },
          ],
          code: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入物资类别编码'),
            },
          ],
          fullName: [
            {
              required: true,
              trigger: 'blur',
              message: translate('请输入物资类别名称'),
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })
      console.log(state.form.parentId)

      //获取详情数据
      const getS = async () => {
        state.listLoading = true
        const {
          data: { data },
        } = await gets(state.queryForm)
        state.form = data
        state.listLoading = false
      }
      const showEdit = (row, type, parentId) => {
        state.form.parentId = parentId
        if (type != 'edit') {
          state.title = '添加'
          // state.form.UserId = ''
        } else {
          state.title = '编辑'
          state.queryForm.companyId = row.CompanyId
          state.queryForm.icid = row.ICID
          getS()
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {}
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            console.log(state.form)
            const { message } = await doEdit(state.form)
            $baseMessage(message, 'success', 'vab-hey-message-success')
            emit('fetchData')
            close()
          }
        })
      }
      return {
        ...toRefs(state),
        showEdit,
        getS,
        close,
        save,
        translate,
      }
    },
  })
</script>
<style scoped>
  .el-form {
    display: flex;
    flex-flow: wrap;
    justify-content: left;
  }
  .el-form >>> .el-input {
    width: 234px !important;
  }
  .el-form-item {
    width: 380px;
  }
</style>
